
<template>

  <el-table :data="MyComments">
    <el-table-column :key="Math.random()">
      <template slot-scope="scope">
        <el-row>
          <el-col :span="20">

            <div class="comment-content">
              <el-avatar :size="40"
                         :src='scope.row.user.userAvatar'
                         class="user-avatar"></el-avatar>
              <span class="comment-text"> {{scope.row.newsCommentContent}} </span>
            </div>

          </el-col>
        </el-row>
        <el-row>
          <el-col :span="20">
            <div class="comment-foot">

              <p> <template v-if="scope.row.thumbup">
                  <el-button icon="el-icon-thumb"
                             type="success"
                             :disabled="idUser == 0"
                             round
                             class="thumbup-btn"
                             @click="deleteCommentThumbsup(scope.row)"></el-button>
                </template>
                <template v-else>
                  <el-button icon="el-icon-thumb"
                             type="primary"
                             round
                             class="thumbup-btn"
                             :disabled="idUser == 0"
                             @click="CommentThumbsup(scope.row)"></el-button>
                </template> 点赞：{{scope.row.newsCommentThumbups}}
              </p>
              <p> 时间： {{scope.row.newsCommentCreatetime}} </p>
              <el-button v-show="scope.row.isShowDelete"
                         type="danger"
                         icon="el-icon-delete"
                         circle
                         class="delete-btn"
                         @click="deleteComment(scope.row)"></el-button>
            </div>
          </el-col>

        </el-row>
      </template>
    </el-table-column>
  </el-table>
</template>
 

<style scoped>
.user-avatar {
  margin-top: 2vw;
  margin-right: 2vw;
}
.news-content {
  font-size: 18px;
  text-align: left;
  margin-top: 5px;
  margin-bottom: 5px;
  font-weight: bold;
}

.comment-input {
  margin: 0;
  margin-top: 1.5vh;
}

.comment-content {
  /* text-align: center; */
  font-size: 16px;
  text-align: left;
  font-weight: bold;
}
.comment-text {
  /* margin-bottom: 200px; */
  padding-bottom: 20px;
}

.thumbup-btn {
  /* float: right; */
  padding: 0 0 0 0;
  width: 30px;
  height: 30px;
}

.delete-btn {
  width: 30px;
  height: 30px;
  padding: 0;
}

/* .el-button{
  padding: 0;
}

.el-button.is-round{
  padding: 0
} */

.comment-foot {
  float: right;
  text-align: right;
}
</style>

 <script>
export default {

  props: {
    Comments: {
      type: Array,
      default: {}
    }
  },

  watch: {
    Comments (newVal, oldVal) {
      this.MyComments = newVal //对父组件传过来的值进行监听，如果改变也对子组件内部的值进行改变
      // console.log("儿子更新了", newVal, oldVal)
    }
  },

  mounted () {

    // console.log(this.Comments, '儿子')

  },
  data () {
    return {

      showAllNews: true,

      MyComments: this.Comments,
      NewsDetail: [],
      commentContent: '',
      isDisable: true,
      commentPlaceHolder: "请输入评论",
      isDeleteBtnShow: true,
      isThumbsup: false,
      idUser: window.sessionStorage.getItem("idUser") == undefined ? 0 : window.sessionStorage.getItem("idUser")


    }
  },
  methods: {
    deleteCommentThumbsup (commentObj) {
      // console.log(commentObj, "取消点赞")
      let that = this
      this.$axios({
        headers: { 'content-Type': 'application/json;charset=utf-8' },
        method: 'delete',
        url: "news/deletenewscommentthumbup",
        params: {

          idNewsComment: commentObj.idNewsComment,
          idUser: this.idUser

        }
      })
        .then(
          response => {

            // console.log('取消点赞成功', response.data)
            that.commentContent = ''
            this.$notify({
              title: '成功',
              message: response.data.msg,
              type: 'success'
            });
            // commentObj.thumbup = true

            that.$emit("notifyFather", true)
          }
        )
        .catch(function (error) {
          // console.log(error);
          that.$notify({
            title: '错误',
            message: response.data.msg,
            type: 'error'
          });
        });

    },
    CommentThumbsup (commentObj) {
      // console.log(commentObj, "点赞")
      let that = this
      this.$axios({
        headers: { 'content-Type': 'application/json;charset=utf-8' },
        method: 'post',
        url: "news/insertnewscommentthumbup",
        params: {

          idNewsComment: commentObj.idNewsComment,
          idUser: this.idUser

        }
      })
        .then(
          response => {

            // console.log('点赞成功', response.data)
            that.commentContent = ''
            this.$notify({
              title: '成功',
              message: response.data.msg,
              type: 'success'
            });
            // commentObj.thumbup = true

            that.$emit("notifyFather", true)
          }
        )
        .catch(function (error) {
          // console.log(error);
          that.$notify({
            title: '错误',
            message: response.data.msg,
            type: 'error'
          });
        });

      // this.isThumbsup = true

    },
    toLogin () {
      this.$router.push("/Login");
    },

    deleteComment (commentObj) {
      // console.log(commentObj)
      let that = this
      this.$axios({
        headers: { 'content-Type': 'application/json;charset=utf-8' },
        method: 'delete',
        url: "news/deletecomment",
        params: {
          idNews: commentObj.idNews,
          idNewsComment: commentObj.idNewsComment

        }
      })
        .then(
          response => {

            // console.log('cccccccoooo:::', response.data)
            that.commentContent = ''
            this.$notify({
              title: '成功',
              message: response.data.msg,
              type: 'success'
            });

            that.$emit("notifyFather", true)
          }
        )
        .catch(function (error) {
          // console.log(error);
          that.$notify({
            title: '错误',
            message: response.data.msg,
            type: 'error'
          });
        });


    },

  }

}

 </script>